<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="./styles/global.css">
    <link rel="stylesheet" href="./styles/displayFrame.css">
    <link rel="stylesheet" href="./unis/css/unis.css">
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>

        .side-bar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: auto;
            bottom: 0;
            z-index: 9999999
        }

        .display-sm {
            display: none;
        }

        .display-xl {
            display: block;
        }

        .router-view-big {
            padding-left: 15rem;
            transition: all 0.5s;
        }

        .router-view-sm {
            padding-left: 4.375rem;
            transition: all 0.5s;
        }

        .router-container {
            padding-top: 3.75rem;
        }

        .side-bar-controller {
            display: none;
        }

        .top-bar-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999999;
            width: 100%;
        }

        @media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
            .side-bar-container {
                left: -20rem;
                transition: all 0.5s;
            }

            .show-side-bar {
                left: -0rem !important;
                transition: all 0.5s;
            }

            .router-view-big {
                padding-left: 0rem;
                transition: all 0.5s;
            }

            .router-view-sm {
                padding-left: 0rem;
                transition: all 0.5s;
            }

            .unis-topBar {
                background: #444545;
            }

            .side-bar-controller {
                display: block;
            }

            .aside-controller {
                top: 1.3rem !important;
            }

            .display-sm {
                display: block !important;

            }

            .display-xl {
                display: none !important;
            }
        }
    </style>
</head>
<body>
<div id="app" class="d-flex ">
    <div class="side-bar-container" :class="{'show-side-bar':isShowSidebar}">
        <div class="unis-aside">
            <div class="aside-unfold" :class="{'aside-fold':isFold}">
                <div class="aside-controller">
                    <b class="right display-xl" @click.stop.prevent="togoaside(isFold)"><i class="right-arrow1"></i><i
                            class="right-arrow2"></i></b>
                    <b class="right display-sm" @click.stop.prevent="closeSide(isFold)"><i class="icon-30"></i></b>

                    <!--<b class="right"><i-->
                    <!--class="right-arrow1"></i><i class="right-arrow2"></i></b>-->
                </div>
                <div class="parent-level-big"
                     :class="{'parent-level-small':isLevelSmall ||isFold}">
                    <div class="log-big"><img src="./unis/img/logo.svg" alt=""></div>
                    <div class="log-nano"><img src="./unis/img/logo-nano.svg" alt=""></div>
                    <div v-for="(item,index) in navLink" :key="item.title"
                         @click.stop.prevent="foldDetails(isFoldDetails,item)"
                         class="item_connect"
                         :class="{'active':navName==item.title}">
                        <div class="item_box">
                            <div class="img-box">
                                <span class="but-t1" style="color: white">{{index< 9 ? 0:''}}{{index+1}}.</span>
                            </div>
                            <div class="pro-ab">
                                <div class="text-box">
                                <span class="unis-a">
                                    <img src="img/left_arrow_sh.svg" alt="">
                                    <div class="text but-t1">{{item.title}}</div>
                                </span>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="parent-details" :class="{'fold-details':isFoldDetails}">
                    <div class="business-box">
                        <div class="business">
                            {{details.title}}
                        </div>
                        <div @click.stop.prevent="onDetail(detail)" class="business-item but-t1"
                             v-for="detail in details.child"
                             :class="{'active':detailActive==detail}"><span href="#"
                                                                            class="unis-a">{{detail.title}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="top-bar-container" :class="isFold?'router-view-sm':'router-view-big'">
        <div class="display-header d-flex align-items-center p-0" style="font-family: Lato;
font-style: normal;
font-weight: bold;
font-size: 32px; height: 112px ">
            <div class="titles col-12 d-flex align-items-center justify-content-between" style="height: 100%;">
                <div class="col-6 f-24"> {{iframemDtiles.displayTitles}} </div>
                <div class="col p-0 d-flex align-items-center ">
                    <div class="f-16" >Theme</div>
                    <div class="col-2">
                        <button class="unis-select unis-dropdown ">
                            {{themeMoudle.name}}
                            <ul>
                                <li v-for="theme in Themes" @click.stop.prevent="selectTheme(theme) ">{{theme.name}}
                                </li>
                            </ul>
                        </button>

                    </div>
                    <div class="col-6 d-flex justify-content-between ml-auto">
                        <a class="f-20  " :href="'./unis/dist/'+cssZip" :download="cssZip">Download
                            <br> ({{cssZip}})</a>
                        <a class="f-20  "  href="./unis/dist/img.zip" download="svgs.zip">Download (img.zip)</a>

                    </div>

                </div>
            </div>
        </div>

        <iframe :src="iframemDtiles.src + '?className=' + themeMoudle.id" name="myFrameName" id="iframeChild"
                class="indexIframe p-4 mb-2" frameborder="0"></iframe>


    </section>
</div>

<script type="text/javascript">
  Vue.config.debug = true;
  app = new Vue({
    el: "#app", data: {
      isFold: false,
      isShowSidebar: false,
      isLevelSmall: false,
      isFoldDetails: false,
      cssZip:'unis.zip',
      navName: 'Dashboard',
      details: {},
      detailActive: '',
      iframemDtiles: {
        displayTitles: "Buttons",
        src: "./unis/buttons.html"
      },
      navLink: [
        {
          title: 'Layouts',
          icon: "icon-19",
          child: [
            {
              title: 'Layout System',
              url: "./unis/grid-system.html",
              displayTitles: "01 Layout System"
            },
            {
              title: 'Layout Grid',
              url: "./unis/layouts-grid.html",
              displayTitles: "01 Layout Grid"
            },
            {
              title: 'Layout Supplement',
              url: "./unis/layout-supplement.html",
              displayTitles: "01 Layout Supplement"
            },
          ]
        },




          /*   {
           title: 'Grid Spacing ',
           icon: "icon-19",
           url: "./grid-system.html",
           displayTitles: "01 Grid Spacing  "
           },*/
        {
          title: 'Colors & Shadows ',
          icon: "icon-51",
          url: "./unis/colors-shadows.html",
          displayTitles: "02 Colors & Shadows"
        },
        {
          title: 'Typography ',
          icon: "icon-51",
          url: "./unis/typography.html",
          displayTitles: "03 Typography"
        },
        {
          title: 'Icons ',
          icon: "icon-50",
          url: "./unis/fonts-icon.html",
          displayTitles: "04 Icons"
        },
        {
          title: 'Buttons',
          icon: "icon-23",
          url: "./unis/buttons.html",
          displayTitles: "05 Buttons"
        },
        {
          title: 'Forms ', icon: "icon-23",
          child: [
            {
              title: 'Forms Text Field',
              url: "./unis/forms-text-field.html",
              displayTitles: "06 Forms Text Field"
            },
            {
              title: 'Forms  Dropdown',
              url: "./unis/forms-dropdown.html",
              displayTitles: "06 Forms  Dropdown"
            },
            {
              title: 'Forms Elements',
              url: "./unis/forms-elements.html",
              displayTitles: "06 Forms Elements"
            }, {
              title: 'Forms Cards',
              url: "./unis/forms-cards.html",
              displayTitles: "06 Forms Cards"
            },
            {
              title: 'Cards',
              url: "./unis/cards.html",
              displayTitles: "06  Cards"
            },
            {
              title: 'Calendar',
              url: "./unis/calendar.html",
              displayTitles: "06 Calendar"
            },]
        },
        {
          title: 'Tables', icon: "icon-11",
          child: [
            {
              title: 'Tables Elements',
              url: "./unis/tables-elements.html",
              displayTitles: "07 Tables/Elements"
            },
            {
              title: 'Tables Customer',
              url: "./unis/tables-customer.html",
              displayTitles: "07 Tables/Customer"
            },
            {
              title: 'Tables Basic',
              url: "./unis/table-basic.html",
              displayTitles: "07 Tables/Basic"
            } , {
              title: 'Fixed Columns',
              url: "./unis/table-fixed-columns-headers.html",
              displayTitles: "07 Tables/Data"
            }, {
              title: 'Tables Data',
              url: "./unis/table-data.html",
              displayTitles: "07 Tables/Data"
            }
          ]
        },
        {
          title: 'Modals', icon: "icon-11", url: "./unis/modals.html",
          displayTitles: "08 Modals"
        },
        {
          title: 'Navigation', icon: "icon-11", url: "./unis/sideNavigation.html",
          displayTitles: "09 Navigation",

        },

        {
          title: 'Other Components', icon: "icon-11", url: "./unis/otherComponents.html",
          displayTitles: "10 Other Components",

        },
        {
          title: 'Notifications', icon: "icon-11", url: "./unis/notifications.html",
          displayTitles: "11 Notifications",

        },
        {
          title: 'Map', icon: "icon-11",
          child: [
            {
              title: 'Map/Tracking',
              url: "./unis/map-tracking.html",
              displayTitles: "12 Map Tracking"
            }, {
              title: 'Map/Transit ',
              url: "./unis/map-transit.html",
              displayTitles: "12 Map Transit "
            },
          ]

        },
      ],
      Themes: [{name: 'blue', id: 'unis-blue'},{name: 'default', id: 'unis'}, {name: 'red', id: 'unis-red'}],
      themeMoudle: {name: 'default', id: 'unis'},
    }, methods: {
      togoaside: function (isfold) {
        if (this.isFoldDetails) this.isLevelSmall = true;
        this.isFold = !isfold;
      },
      foldDetails: function (isFoldDetails, item) {
        if (!item.child) {
          this.iframemDtiles.src = item.url;
          this.titles = item.title;
          this.iframemDtiles.displayTitles = item.displayTitles;
        }
        this.details = {
          title: item.title, child: item.child
        };
        this.navName = item.title;
        if (item.child) {
          if (!isFoldDetails) this.isFoldDetails = true;
          this.isFold = false;
          this.isLevelSmall = true;
        } else {
          this.isLevelSmall = false;
          this.isFoldDetails = false;
        }
      }, onDetail: function (detail) {
        this.detailActive = detail;
        this.iframemDtiles.src = detail.url;
        this.titles = detail.title;
        this.iframemDtiles.displayTitles = detail.displayTitles;
      },
      onShowSidebar: function () {
        this.isShowSidebar = true;
      },
      closeSide: function () {
        this.isShowSidebar = false;
      },
      selectTheme: function (theme) {
        this.themeMoudle = theme;
        if(theme.name=='default'){
          this.cssZip='unis.zip';
        }
        if(theme.name=='blue'){
          this.cssZip='unis-blue.zip';
        }
        if(theme.name=='red'){
          this.cssZip='unis-red.zip';
        }
      }


    }
  });
</script>

</body>
</html>
